<!DOCTYPE html>
<html>
<head>
    <title>PlayCanvas Sparks Particles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
    <script src="../../build/output/playcanvas.js"></script>
    <style>
        body { 
            margin: 0;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <!-- The canvas element -->
    <canvas id="application-canvas"></canvas>

    <script>
        function createMaterial(colors) {
            var material = new pc.StandardMaterial();
            for (var param in colors) {
                material[param] = colors[param];
            }
            material.update();
            return material;
        }

        var canvas = document.getElementById("application-canvas");

        // Create the application and start the update loop
        var app = new pc.Application(canvas);
        app.start();

        // Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        window.addEventListener("resize", function () {
            app.resizeCanvas(canvas.width, canvas.height);
        });

        // Create an Entity with a camera component
        var cameraEntity = new pc.Entity();
        cameraEntity.addComponent("camera", {
            clearColor: new pc.Color(0,0,0.05)
        });
        cameraEntity.rotateLocal(0, 0, 0);
        cameraEntity.translateLocal(0, 0, 10);

        // Create a directional light
        var lightDirEntity = new pc.Entity();
        lightDirEntity.addComponent("light", {
            type: "directional",
            color: new pc.Color(1, 1, 1),
            intensity: 1
        });
        lightDirEntity.setLocalEulerAngles(45,0,0);

        // Add Entities into the scene hierarchy
        app.root.addChild(cameraEntity);
        app.root.addChild(lightDirEntity);


        // Offset position
        var localPosCurve = new pc.CurveSet([
            [0, 0, 1, 4],
            [0, 0, 1, 3],
            [0, 0, 1, 0]
        ]);
        localPosCurve.type = pc.CURVE_LINEAR;

        // make particles move in different directions
        var localVelocityCurve = new pc.CurveSet([
            [0, 0, 1, 8],
            [0, 0, 1, 6],
            [0, 0, 1, 0]
        ]);
        var localVelocityCurve2 = new pc.CurveSet([
            [0, 0, 1, -8],
            [0, 0, 1, -6],
            [0, 0, 1, 0]
        ]);

        // increasing gravity
        var worldVelocityCurve = new pc.CurveSet([
            [0, 0],
            [0, 0, 0.2, 6, 1, -48],
            [0, 0]
        ]);

        // gradually make sparks bigger
        var scaleCurve = new pc.Curve(
            [0, 0, 0.5, 0.3, 0.8, 0.2, 1, 0.1]
        );

        // rotate sparks 360 degrees per second
        var angleCurve = new pc.Curve(
            [0, 360]
        );

        // color changes throughout lifetime
        var colorCurve = new pc.CurveSet([
            [0, 1, 0.25, 1, 0.375, 0.5, 0.5, 0],
            [0, 0, 0.125, 0.25, 0.25, 0.5, 0.375, 0.75, 0.5, 1],
            [0, 0, 1, 0]
        ]);

        // Create entity for particle system
        var entity = new pc.Entity();
        app.root.addChild(entity);
        entity.setLocalPosition(0, 0, 0);

        // load snowflake texture
        app.assets.loadFromUrl('../assets/textures/spark.png', 'texture', function (err, asset) {

            // when texture is loaded add particlesystem component to entity
            entity.addComponent("particlesystem", {
                numParticles: 200,
                lifetime: 2,
                rate: 0.01,
                scaleGraph: scaleCurve,
                rotationSpeedGraph: angleCurve,
                colorGraph: colorCurve,
                colorMap: asset.resource,
                velocityGraph: worldVelocityCurve,
                localVelocityGraph: localVelocityCurve,
                localVelocityGraph2: localVelocityCurve2
            });
        });

    </script>
</body>
</html>
